<template>
  <div>
    <el-form inline>
      <el-form-item>
        <pick @getSite="getSites"></pick>
      </el-form-item>
      <el-form-item label=" ">
        <el-autocomplete
          v-model="testing.name"
          :fetch-suggestions="querySearch"
          placeholder="请输入检查站名称"
          @select="handleSelect"
        ></el-autocomplete>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="init">查询</el-button>
        <el-button type="primary" icon="el-icon-edit" @click="handleEdit2"
          >添加检测站</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 渲染数据列表 -->
    <el-table :data="station" style="width: 100%">
      <el-table-column prop="name" label="监测站名称" width="180">
      </el-table-column>
      <el-table-column prop="liaisonName" label="检测站联系人" width="180">
      </el-table-column>
      <el-table-column prop="liaisonPhone" label="联系人电话">
      </el-table-column>
      <el-table-column prop="equipmentInfo" label="设备信息"> </el-table-column>
      <el-table-column prop="businessHours" label="营业时间"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" @click="handleEdit(scope.row)"
            >详情</el-button
          >
          <el-button type="info" @click="handleDelete(scope.row)"
            >修改</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 弹出框 -->
    <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible"
      width="60%"
      center
    >
      <el-descriptions
        direction="horizontal"
        :column="3"
        :labelStyle="labelStyle"
        border
      >
        <el-descriptions-item  label="id">{{ testing.id }}</el-descriptions-item>
        <el-descriptions-item label="检测站名称">{{
          testing.name
        }}</el-descriptions-item>
        <el-descriptions-item label="联系人姓名" :span="2">{{
          testing.liaisonName
        }}</el-descriptions-item>
        <el-descriptions-item label="联系人电话">
          {{ testing.liaisonPhone }}
        </el-descriptions-item>
        <el-descriptions-item label="银行名称">
          {{ testing.bankName }}</el-descriptions-item
        >
        <el-descriptions-item label="银行账号">{{
          testing.bankAccount
        }}</el-descriptions-item>
        <el-descriptions-item label="安全检测价格">{{
          testing.safePrice
        }}</el-descriptions-item>
        <el-descriptions-item label="设备信息">{{
          testing.equipmentInfo
        }}</el-descriptions-item>
        <el-descriptions-item label="营业时间">{{
          testing.businessHours
        }}</el-descriptions-item>
        <el-descriptions-item label="环境检测价格">{{
          testing.envPrice
        }}</el-descriptions-item>
        <el-descriptions-item label="合作价格">
          <!-- {{testing.cooperPrice}} -->
          <!-- 价格： -->
          <!-- {{ testing.cooperPrice["'min'"] }} -->
          <span
            v-for="(item, index) in testing.cooperPrice &&
            JSON.parse(testing.cooperPrice)"
            :key="index"
          >
            价格:{{ item.price }}百分比:{{ item.percent }}% 合作区间:{{
              item.min
            }}~{{ item.max }}
          </span>
        </el-descriptions-item>
        <el-descriptions-item label="检测车辆类型">{{
          testing.scale
        }}</el-descriptions-item>
        <el-descriptions-item label="检测站地址">{{
          testing.address
        }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>

    <!-- 分页 -->
    <el-pagination
      @current-change="handleCurrentChange"
      :page-size="10"
      layout="prev, pager, next, jumper"
      :total="testing.total"
    >
    </el-pagination>

    <!-- 添加弹窗 -->
    <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible2"
      width="40%"
      center
    >
      <el-form label-width="90px" :rules="rules">
        <el-form-item label="检测站名称"  prop="name">
          <el-input v-model="stationdata.name"></el-input>
        </el-form-item>
        <el-form-item label="联系人姓名"  prop="region">
          <el-input v-model="stationdata.liaisonName"></el-input>
        </el-form-item>
        <el-form-item label="联系人电话" prop="Telephone">
          <el-input v-model="stationdata.liaisonPhone"></el-input>
        </el-form-item>
        <el-form-item label="银行账号" prop="account">
          <el-input v-model="stationdata.bankAccount"></el-input>
        </el-form-item>
        <el-form-item label="银行名称" prop="yname">
          <el-input v-model="stationdata.bankName"></el-input>
        </el-form-item>
        <el-form-item label="安全检测价格" prop="Price">
          <el-input v-model="stationdata.safePrice"></el-input>
        </el-form-item>
        <el-form-item label="环境检测价格" prop="Priceh">
          <el-input v-model="stationdata.envPrice"></el-input>
        </el-form-item>
        <el-form-item label="检测车辆类型" prop="type">
          <el-select v-model="stationdata.scale" multiple placeholder="请选择">
            <el-option value="小型车"> </el-option>
            <el-option value="中型车"> </el-option>
            <el-option value="大型车"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备信息"  prop="information">
          <el-input v-model="stationdata.equipmentInfo"></el-input>
        </el-form-item>
        <el-form-item label="营业时间">
          <el-time-picker
            is-range
            v-model="stationdata.businessHoursList"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围"
            value-format="HH:mm:ss"
            @change="businessHoursChange"
          >
          </el-time-picker>
        </el-form-item>
        <el-form-item label="检测站地址" prop="address">
          <pick @getSite="getSite"></pick>
          <el-input v-model="stationdata.address"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="establish">立即创建</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 修改弹窗 -->
    <el-dialog
      title="检测站详情"
      :visible.sync="centerDialogVisible3"
      width="70%"
      center
    >
      <el-descriptions class="margin-top" :column="3" border>
        <el-descriptions-item>
          <template slot="label"> id </template>
          {{ testing.id }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 检测站名称 </template>
          <el-input v-model="testing.name" placeholder="请输入内容"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 联系人姓名 </template>
          <el-input
            v-model="testing.liaisonName"
            placeholder="请输入内容"
          ></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 联系人电话 </template>
          <el-input
            v-model="testing.liaisonPhone"
            placeholder="请输入内容"
          ></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 银行名称 </template>
          <el-input
            v-model="testing.bankName"
            placeholder="请输入内容"
          ></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 银行账户 </template>
          <el-input
            v-model="testing.bankAccount"
            placeholder="请输入内容"
          ></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 安全检查价格 </template>
          <el-input
            v-model="testing.safePrice"
            placeholder="请输入内容"
          ></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 设备信息 </template>
          <el-input
            v-model="testing.equipmentInfo"
            placeholder="请输入内容"
          ></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 营业时间 </template>
          <el-time-picker
            is-range
            v-model="testing.businessHoursList"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围"
            value-format="HH:mm:ss"
            @change="businessHoursChange2"
          >
          </el-time-picker>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 检测车辆类型 </template>
          <el-select v-model="testing.scale" multiple placeholder="请选择">
            <el-option value="小型车"> </el-option>
            <el-option value="中型车"> </el-option>
            <el-option value="大型车"> </el-option>
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 环境检测价格 </template>
          <el-input
            v-model="testing.envPrice"
            placeholder="请输入内容"
          ></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 检测站地址 </template>
          <pick></pick>
          <el-input
            v-model="testing.address"
            placeholder="请输入内容"
          ></el-input>
        </el-descriptions-item>
      </el-descriptions>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="modify">提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import pick from "../../components/pickArea.vue";
export default {
  components: { pick },
  data() {
    return {
      station: [],
      centerDialogVisible: false,
      centerDialogVisible2: false,
      centerDialogVisible3: false,
      labelStyle: {
        fontWeight: 700,
      },
      testing: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
      },
      stationdata: {},
      rules: {
        name: [
          { required: true, message: "请输入检测站名称", trigger: "blur" },
          { min: 3, max: 10, message: "长度在 3 到 10 个字符", trigger: "blur" },
        ],
        region: [
          { required: true, message: "请输入联系人姓名", trigger: "blur" },
          { min: 3, max: 10, message: "长度在 3 到 10 个字符", trigger: "blur" },

        ],
        Telephone: [
          { required: true, message: "请输入联系人电话", trigger: "blur" },
        ],
        account : [
          { required: true, message: "请输入银行账号", trigger: "blur" },
        ],
        yname: [
          { required: true, message: "请输入银行名称", trigger: "blur" },
        ],
        Price: [
          { required: true, message: "请输入安全检测价格", trigger: "blur" },
        ],
        Priceh: [
          { required: true, message: "请输入环境检测价格", trigger: "blur" },
        ],
        type: [
          { required: true, message: "请输入检测车辆类型", trigger: "blur" },
        ],
information: [
          { required: true, message: "请输入设备信息", trigger: "blur" },
        ],
        address: [
          { required: true, message: "请选择并填入详细地址", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.$http
        .get("/testStation/getAllStation", { params: this.testing })
        .then((res) => {
          console.log(res.data.object.list);
          this.station = res.data.object.list;
          this.testing.total = res.data.object.total;
          console.log(this.testing.total);
        });
    },
    // 开启弹框
    handleEdit(row) {
      this.centerDialogVisible = true;
      this.testing = row;
    },
    // 开启添加检测站弹框
    handleEdit2(row) {
      this.centerDialogVisible2 = true;
    },
    // 开启修改检查站弹框
    handleDelete(row) {
      this.centerDialogVisible3 = true;
      this.testing = row;
    },
    // 分页
    handleCurrentChange(val) {
      this.testing.pageNum = val;
      this.init();
    },
    querySearch(stationName, cb) {
      this.$http
        .get("/testStation/getAllStation", { params: { stationName } })
        .then((res) => {
          // console.log(res);
          let results = [];
          res.data.object.list.forEach((item) => {
            results.push({ value: item.name, id: item.id });
          });
          cb(results);
        });
    },
    handleSelect(item) {
      this.testing.stationName = item.value;
    },
    // 创建检查站
    establish() {
      console.log(this.stationdata);
      this.$http
        .post("/testStation/addStation", this.stationdata)
        .then((res) => {
          this.$message({
            message: "恭喜你,添加成功",
            type: "success",
          });
          // console.log(res);
        });
      this.centerDialogVisible2 = true;
    },
    // 地址3级联动
    getSite(prov, city, district) {
      this.stationdata.province = prov;
      this.stationdata.city = city;
      this.stationdata.area = district;
    },
    getSites(prov, city, district) {
      this.testing.province = prov;
      this.testing.city = city;
      this.testing.area = district;
      // console.log(this.testing.province,this.testing.city,this.testing.area = district);
    },
    // 改变日期数据格式
    businessHoursChange: function () {
      this.stationdata.businessHours =
        this.stationdata.businessHoursList[0] +
        "  -  " +
        this.stationdata.businessHoursList[1];
    },
    businessHoursChange2: function () {
      this.testing.businessHours =
        this.testing.businessHoursList[0] +
        "  -  " +
        this.testing.businessHoursList[1];
      console.log(this.testing.businessHours);
    },
    modify() {
      this.testing.scale = JSON.stringify(this.testing.scale)
      this.$http
        .post("/testStation/updateStation", this.testing)
        .then((res) => {
          console.log(res);
        });
      this.centerDialogVisible2 = true;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>


